<template>
	<view class="setting-pwd-tip">
		<view class="setting-pwd-tip-icon">
			<image v-if="tipInfo.showIcon != false" src="@/static/images/setting/setting-pwd-tip-icon.png" style="width: 12px;height: 12px;"
				class="setting-pwd-tip-icon-img" />
		</view>
		<view v-html="tipInfo.text" style="white-space: pre-wrap;">
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			tipInfo:{
				type: Object,
				default:() => {
					return {
						text: '',
						showIcon: true
					}
				}
			}
		},
		mounted() {
		}
	}
</script>

<style lang="scss" scoped>
	.setting-pwd-tip {
		padding: 12px;
		background: rgba(23, 182, 255, 0.05);
		border-radius: 2px;
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #26bbff;
		margin-bottom: 12px;
		display: flex;
		box-sizing: border-box;
		width: 100%;
		.setting-pwd-tip-icon{
			width: 12px;
			height: 12px;
			margin-right: 5px;
		}
	
		.setting-pwd-tip-icon-img {
			width: 12px;
			height: 12px;
			display: inline-block;
			
			position: relative;
			top: 2px;
		}
	}
	@media screen and (min-width: 0px) and (max-width:1024px){
		.setting-pwd-tip{
			font-size: 10px;
		}
	}
</style>